<template>
  <div class="create-post-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="top" label-width="100px" class="meeting-form">
      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-divider content-position="left">基本信息</el-divider>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="会议标题" prop="meetingtitle">
            <el-input v-model="postForm.meetingtitle" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="讲师姓名" prop="lecturerName">
            <el-select
              v-model="postForm.lecturerName"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="可自行输入，并按下回车选择讲师"
              style="width:100%"
            >
              <el-option
                v-for="(item, index) in postForm.lecturerName"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="9" :offset="3">
          <el-form-item label="会议类型" prop="type">
            <el-select
              v-model="postForm.type"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in meetingTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="参会类型" prop="meetingtype">
            <el-select
              v-model="postForm.meetingtype"
              placeholder="请选择"
              disabled
              style="width:100%"
            >
              <el-option
                v-for="item in joinMeetingTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="会议起止时间" prop="dateRange">
            <el-date-picker
              v-model="postForm.dateRange"
              type="datetimerange"
              start-placeholder="召开时间"
              end-placeholder="结束时间"
              :default-time="['12:00:00']"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:100%"
              @change="dateRangeChange"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="9" :offset="3">
          <el-form-item label="会议CODE" prop="meetingcode">
            <el-input v-model="postForm.meetingcode" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="OM编码" prop="omcode">
            <el-input v-model="postForm.omcode" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="9" :offset="3">
          <el-form-item label="省份" prop="provinceCode">
            <el-select
              v-model="postForm.provinceCode"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeProvince"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.id"
                :label="item.province_name"
                :value="item.province_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="城市" prop="cityCode">
            <el-select
              v-model="postForm.cityCode"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeCity"
            >
              <el-option
                v-for="item in cityOptions"
                :key="item.id"
                :label="item.city_name"
                :value="item.city_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="召开地点" prop="location">
            <el-input v-model="postForm.location" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="BU" prop="buids">
            <el-select
              v-model="postForm.buids"
              multiple
              filterable
              placeholder="可多选"
              style="width:100%"
            >
              <el-option
                v-for="item in buListOptions"
                :key="item.id"
                :label="item.bu"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="TA" prop="taids">
            <el-select
              v-model="postForm.taids"
              multiple
              filterable
              placeholder="可多选"
              style="width:100%"
            >
              <el-option
                v-for="item in taListOptions"
                :key="item.id"
                :label="item.ta"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="相关产品" prop="brandids">
            <el-select
              v-model="postForm.brandids"
              multiple
              filterable
              placeholder="可多选"
              style="width:100%"
            >
              <el-option
                v-for="item in productsOptions"
                :key="item.id"
                :label="item.brand"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="会议简介" prop="meetingdesc">
            <el-input v-model="postForm.meetingdesc" type="textarea" rows="4" />
            <div class="form-tips text-warning">用于分享描述</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="mt30">
        <el-col :span="18" :offset="3">
          <el-form-item>
            <el-button type="primary" @click="submitForm">提 交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getProvince,
  getCities,
  getBuList,
  getTaList,
  getProducts
} from '@/api/baseData'
import {
  getMeetingShow,
  getMeetingType,
  getJoinMeetingType,
  addMeeting,
  editMeeting
} from '@/api/meetings'

const defaultForm = {
  id: undefined,
  meetingtitle: '',
  lecturerName: [],
  type: '',
  meetingtype: 1,
  dateRange: [],
  begintime: '',
  endtime: '',
  meetingcode: '',
  omcode: '',
  province: '',
  provinceCode: '',
  city: '',
  cityCode: '',
  location: '',
  meetingdesc: '',
  buids: [],
  taids: [],
  brandids: []
}

export default {
  name: 'OfflineMeetingForm',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      meetingTypeOptions: [],
      joinMeetingTypeOptions: [],
      provinceOptions: [],
      cityOptions: [],
      buListOptions: [],
      taListOptions: [],
      productsOptions: [],
      postForm: Object.assign({}, defaultForm),
      loading: false,
      rules: {
        meetingtitle: [
          { required: true, message: '请输入会议标题', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择会议类型', trigger: 'change' }
        ],
        meetingtype: [
          { required: true, message: '请选择参会类型', trigger: 'change' }
        ],
        provinceCode: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        cityCode: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        dateRange: [
          { required: true, message: '请选择会议起止时间', trigger: 'change' }
        ]
      },
      uploadUrl: process.env.VUE_APP_BASE_API + '/content/imgUpload'
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ]),
    checkThirdPage() {
      return this.postForm.isThird === 1
    }
  },
  created() {
    this.fetchMeetingType()
    this.fetchJoinMeetingType()
    this.fetchProvince()
    this.fetchtBuList()
    this.fetchtTaList()
    this.fetchtProducts()
    this.postForm.dateRange = []
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.fetchData(id)
    }
  },
  methods: {
    fetchMeetingType() {
      getMeetingType().then(response => {
        // console.log(response)
        this.meetingTypeOptions = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    fetchJoinMeetingType() {
      getJoinMeetingType().then(response => {
        // console.log(response)
        this.joinMeetingTypeOptions = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    fetchProvince() {
      getProvince().then(response => {
        // console.log(response)
        this.provinceOptions = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    fetchCities(code) {
      getCities({ provinceCode: code }).then(response => {
        // console.log(response)
        this.cityOptions = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    fetchtBuList() {
      getBuList().then(response => {
        // console.log(response)
        this.buListOptions = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    fetchtTaList() {
      getTaList().then(response => {
        // console.log(response)
        this.taListOptions = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    fetchtProducts() {
      getProducts().then(response => {
        // console.log(response)
        this.productsOptions = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    fetchData(id) {
      getMeetingShow({ id }).then(response => {
        const { data } = response
        // console.log(data)
        this.postForm.id = data.id
        this.postForm.meetingtitle = data.meetingtitle
        this.postForm.lecturerName = data.lecturer
        this.postForm.type = data.type
        this.postForm.meetingtype = data.meetingtype
        this.postForm.begintime = data.begintime
        this.postForm.endtime = data.endtime
        this.postForm.dateRange.push(data.begintime, data.endtime)
        this.postForm.meetingcode = data.meetingcode
        this.postForm.omcode = data.omcode
        this.postForm.province = data.province
        this.postForm.provinceCode = data.provinceCode
        this.postForm.city = data.city
        this.postForm.cityCode = data.cityCode
        this.postForm.location = data.location
        this.postForm.meetingdesc = data.meetingdesc
        this.postForm.brandids = data.brandids
        this.postForm.taids = data.taids
        this.postForm.buids = data.buids
        if (!this._.isEmpty(data.provinceCode)) {
          this.fetchCities(data.provinceCode)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    dateRangeChange(date) {
      // console.log(date)
      if (!this._.isEmpty(date)) {
        this.postForm.begintime = date[0]
        this.postForm.endtime = date[1]
        this.postForm.dateRange = date
      } else {
        this.postForm.begintime = ''
        this.postForm.endtime = ''
        this.postForm.dateRange = []
      }
    },
    changeProvince(province) {
      this.postForm.city = ''
      this.postForm.cityCode = ''
      this.cityOptions = []
      if (this._.isEmpty(province)) {
        this.postForm.province = ''
      } else {
        let provinceObj = {}
        provinceObj = this.provinceOptions.find((item) => {
          return item.province_code === province
        })
        this.postForm.province = provinceObj.province_name
        this.fetchCities(province)
      }
    },
    changeCity(city) {
      if (this._.isEmpty(city)) {
        this.postForm.city = ''
      } else {
        let cityObj = {}
        cityObj = this.cityOptions.find((item) => {
          return item.city_code === city
        })
        this.postForm.city = cityObj.city_name
      }
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.postForm.lecturerName = this.postForm.lecturerName.join(',')
          this.postForm.buids = this.postForm.buids.join(',')
          this.postForm.taids = this.postForm.taids.join(',')
          this.postForm.brandids = this.postForm.brandids.join(',')

          this.loading = true
          if (this.isEdit) {
            editMeeting(this.postForm).then(response => {
              // console.log(response)
              this.$notify({
                title: '成功',
                message: '编辑会议成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.$router.go(-1)
            }).catch(err => {
              console.log(err)
            })
          } else {
            addMeeting(this.postForm).then(response => {
              // console.log(response)
              this.$notify({
                title: '成功',
                message: '添加会议成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.$router.go(-1)
            }).catch(err => {
              console.log(err)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.postForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.create-post-container {
  position: relative;
}
</style>
